<route lang="json5" type="page">
  {
    style: {
      navigationBarTitleText: '课次详情',
    },
    anonymous: false
  }
</route>

<script setup lang='ts'>
import { useMessage } from 'wot-design-uni'
import { LessonApi } from '@/apis'
import getAvatar from '@/utils/avatar'

const message = useMessage()

const loading = ref(false)
const lessonId = ref()
const detail = ref<LessonApi.ClassLessonDetailResp>()

const getDetail = async () => {
  detail.value = await LessonApi.getClassLessonDetail(lessonId.value)
}

const gotoStudentDetail = (item) => {
  uni.navigateTo({
    url: `/pages/class/student?id=${item.studentId}`,
  })
}

const unSignInStudentList = computed(() => {
  return detail.value.normalStudentList.filter(item => !item.signInStatus)
})

const onSignInAll = async () => {
  const studentIdList = unSignInStudentList.value.map(item => item.studentId)
  if (!studentIdList.length) {
    return
  }

  message.confirm({
    title: '提示',
    msg: `确定对${studentIdList.length}人全部点名吗？`,
  }).then(() => {
    loading.value = true
    LessonApi.signIn({
      lessonId: lessonId.value,
      studentIdList,
    }).then(() => {
      uni.showToast({ title: '点名成功', icon: 'success' })
      getDetail()
    })
  }).catch(() => {
    console.log('点击了取消按钮')
  }).finally(() => {
    loading.value = false
  })
}

const onSignIn = async (item) => {
  try {
    loading.value = true
    await LessonApi.signIn({
      lessonId: lessonId.value,
      studentIdList: [item.studentId],
    })
    uni.showToast({ title: '点名成功', icon: 'success' })
    getDetail()
  } catch (err) {
    console.warn('点名失败: ', err)
  } finally {
    loading.value = false
  }
}

const onUnSignIn = async (item) => {
  message.confirm({
    title: '提示',
    msg: `确定撤销[${item.student.name}]点名吗？`,
  }).then(() => {
    loading.value = true
    LessonApi.unSignIn({
      lessonId: lessonId.value,
      studentIdList: [item.studentId],
    }).then(() => {
      uni.showToast({ title: '撤销成功', icon: 'success' })
      getDetail()
    })
  }).catch(() => {
    console.log('点击了取消按钮')
  }).finally(() => {
    loading.value = false
  })
}

onLoad((options) => {
  if (options.id) {
    lessonId.value = options.id
    getDetail()
  }
})
</script>

<template>
  <view v-if="detail" class="px py page">
    <view class="border-rd-[16rpx] bg-white p-[24rpx]">
      <view class="flex-row-between-center font-500">
        <text class="text-38rpx text-main">
          {{ detail.title }}
        </text>
        <view class="text-30rpx text-main">
          <wd-icon name="time" />
          <text class="ml-1">
            {{ detail.lessonDate }} {{ detail.startTime }} - {{ detail.endTime }}
          </text>
        </view>
      </view>
      <view class="mt-2 text-24rpx text-secondary">
        {{ detail.className }}
      </view>
      <view class="mt-2 text-24rpx text-secondary">
        {{ detail.campusName }}·{{ detail.classroomName }}
      </view>
      <view class="mt-[30rpx] flex border-rd-[8rpx] bg-[#ECFFF8] py-[20rpx]">
        <view class="flex-col-center-center flex-1">
          <view>
            <text class="font-size-[36rpx] color-[#33AD7C] font-600">
              {{ detail.totalStudentCount }}
            </text>
            <text class="font-size-[24rpx] color-[#666]">
              人
            </text>
          </view>
          <view class="font-size-[26rpx] color-[#4E5969]">
            应到
          </view>
        </view>
        <view class="flex-col-center-center flex-1">
          <view>
            <text class="font-size-[36rpx] color-[#33AD7C] font-600">
              {{ detail.attendanceStudentCount }}
            </text>
            <text class="font-size-[24rpx] color-[#666]">
              人
            </text>
          </view>
          <view class="font-size-[26rpx] color-[#4E5969]">
            实到
          </view>
        </view>
        <view class="flex-col-center-center flex-1">
          <view>
            <text class="font-size-[36rpx] color-[#33AD7C] font-600">
              {{ detail.attendanceRate.toFixed(0) }}
            </text>
            <text class="font-size-[24rpx] color-[#666]">
              %
            </text>
          </view>
          <view class="font-size-[26rpx] color-[#4E5969]">
            出勤率
          </view>
        </view>
      </view>
    </view>
    <wd-tabs class="mt-2" inactive-color="#86909C" :line-width="24" :line-height="4">
      <wd-tab :title="`在读学生(${detail.totalStudentCount})`">
        <view v-if="detail.normalStudentList.length" class="mt-1">
          <view class="flex-row-end-center">
            <wd-tag custom-class="space" type="success" bg-color="#0083ff">
              转入{{ detail.changeClassInStudentCount }}人
            </wd-tag>
            <wd-tag custom-class="space ml" type="warning">
              调入{{ detail.changeLessonInStudentCount }}人
            </wd-tag>
          </view>
          <view
            v-for="(item, index) in detail.normalStudentList"
            :key="index"
            class="mt-[24rpx] flex items-center gap-[16rpx] border-rd-[16rpx] bg-white p-[24rpx]"
          >
            <wd-img width="88rpx" radius="8rpx" height="88rpx" :src="getAvatar(item.student.avatar, item.student.gender)" />
            <view class="flex-1" @click="gotoStudentDetail(item)">
              <view class="flex items-center">
                <text class="font-size-[30rpx]">
                  {{ item.student.name }}
                </text>
                <wd-icon v-if="item.student.gender === 1" name="gender-male" size="30rpx" color="#3c74df" />
                <wd-icon v-else-if="item.student.gender === 2" name="gender-female" size="30rpx" color="#FF0088" />
              </view>
              <view class="mt-[10rpx] flex items-center gap-[8rpx]">
                <view class="border-rd-[4rpx] bg-[#E8F3FF] px-[8rpx] font-size-[24rpx] color-[#2176E7]">
                  {{ item.student.parentPhone }}
                </view>
                <view v-if="item.studentJoinType !== 1" class="border-rd-[4rpx] bg-[#FFF7E8] px-[8rpx] font-size-[24rpx] color-[#FF7D00]">
                  {{ useDictLabel('JoinTypeEnum', item.studentJoinType) }}
                </view>
              </view>
            </view>
            <view>
              <view v-if="item.signInStatus" class="flex items-center">
                <wd-icon name="check-circle-filled" size="30rpx" color="#33AD7C" />
                <wd-button type="text" @click.stop="onUnSignIn(item)">
                  已到
                </wd-button>
              </view>
              <wd-button v-else :loading="loading" :round="false" size="small" @click.stop="onSignIn(item)">
                点名
              </wd-button>
            </view>
          </view>
        </view>
        <view v-else class="mt-4">
          <wd-status-tip image="content" tip="暂无数据" />
        </view>
      </wd-tab>
      <wd-tab :title="`转出学生(${detail.changeClassOutStudentCount})`">
        <view v-if="detail.changeClassOutStudentList.length" class="mt-4">
          <view
            v-for="(item, index) in detail.changeClassOutStudentList"
            :key="index" class="mt-[24rpx] flex items-center gap-[16rpx] border-rd-[16rpx] bg-white p-[24rpx]" @click="gotoStudentDetail(item)"
          >
            <wd-img width="88rpx" radius="8rpx" height="88rpx" :src="getAvatar(item.student.avatar, item.student.gender)" />
            <view class="flex-1">
              <view class="flex items-center">
                <text class="font-size-[30rpx]">
                  {{ item.student.name }}
                </text>
                <wd-icon v-if="item.student.gender === 2" name="gender-female" size="30rpx" color="#FF0088" />
                <wd-icon v-else name="gender-male" size="30rpx" color="#3c74df" />
              </view>
              <view class="mt-[10rpx] flex items-center gap-[8rpx]">
                <view class="border-rd-[4rpx] bg-[#E8F3FF] px-[8rpx] font-size-[24rpx] color-[#2176E7]">
                  {{ item.student.parentPhone }}
                </view>
                <view class="border-rd-[4rpx] bg-[#FFF7E8] px-[8rpx] font-size-[24rpx] color-[#FF7D00]">
                  {{ useDictLabel('StudentClassEnum', item.studentClassStatus) }}
                </view>
              </view>
            </view>
          </view>
        </view>
        <view v-else class="mt-4">
          <wd-status-tip image="content" tip="暂无数据" />
        </view>
      </wd-tab>
      <wd-tab :title="`调出学生(${detail.changeLessonOutStudentCount})`">
        <view v-if="detail.changeLessonOutStudentList.length" class="mt-4">
          <view
            v-for="(item, index) in detail.changeLessonOutStudentList"
            :key="index" class="mt-[24rpx] flex items-center gap-[16rpx] border-rd-[16rpx] bg-white p-[24rpx]" @click="gotoStudentDetail(item)"
          >
            <wd-img width="88rpx" radius="8rpx" height="88rpx" :src="getAvatar(item.student.avatar, item.student.gender)" />
            <view class="flex-1">
              <view class="flex items-center">
                <text class="font-size-[30rpx]">
                  {{ item.student.name }}
                </text>
                <wd-icon v-if="item.student.gender === 2" name="gender-female" size="30rpx" color="#FF0088" />
                <wd-icon v-else name="gender-male" size="30rpx" color="#3c74df" />
              </view>
              <view class="mt-[10rpx] flex items-center gap-[8rpx]">
                <view class="border-rd-[4rpx] bg-[#E8F3FF] px-[8rpx] font-size-[24rpx] color-[#2176E7]">
                  {{ item.student.parentPhone }}
                </view>
                <view class="border-rd-[4rpx] bg-[#FFF7E8] px-[8rpx] font-size-[24rpx] color-[#FF7D00]">
                  {{ useDictLabel('StudentClassEnum', item.studentClassStatus) }}
                </view>
              </view>
            </view>
          </view>
        </view>
        <view v-else class="mt-4">
          <wd-status-tip image="content" tip="暂无数据" />
        </view>
      </wd-tab>
    </wd-tabs>
    <view class="bottom px pt-30rpx">
      <wd-button size="large" :block="true" :round="false" :loading="loading" :disabled="unSignInStudentList.length === 0" @click="onSignInAll">
        一键点名（{{ unSignInStudentList.length }}人）
      </wd-button>
      <SafeBottom />
    </view>
  </view>
</template>

<style lang="scss" scoped>
  .page {
    padding-bottom: 140rpx;
    box-sizing: border-box;
  }
  :deep(.wd-tabs__nav-container) {
    background: #f8f8f8;
  }

  :deep(.wd-tabs__container) {
    background: #f8f8f8;
  }
  .bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
  }

  .disabled {
    background: #ccc !important;
  }
</style>
